<template>
  <SelfLoading v-if="loading" />
  <!-- <h3 v-if="loading">loading</h3> -->
  <img class="image" :src="result?.message" v-if="loaded" />
  <div>{{ count }}</div>
  <h3>{{ double }}</h3>
  <button @click="increase">增加数量</button>
</template>

<script lang="ts">
import useURLLoader from "@/hooks/useUrlLoader";
import SelfLoading from "@/components/SelfLoading.vue";
import { computed, reactive, ref, toRefs, watch } from "vue";

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
interface ResData {
  message: string;
  status: string;
}
export default {
  components: {
    SelfLoading,
  },
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => data.count++,
      double: computed(() => data.count * 2),
    });

    document.title = "123";

    const ref1 = ref(1);

    const refData = toRefs(data);
    watch([ref1, () => data.count], ([num, num2], old) => {
      console.log(num, num2, old);
      document.title = "123" + data.count;
    });

    const { loading, result, loaded } = useURLLoader<ResData>(
      "https://dog.ceo/api/breeds/image/random"
    );
    return {
      ...refData,
      loading,
      result,
      loaded,
    };
  },
};
</script>

<style lang="scss" scoped>
.image {
  width: 100px;
  height: auto;
}
</style>
